
<template>
  <div>
    <!-- <el-form :model="dataForm" label-width="80px"  ref="dataForm"> -->
    <el-form class="addform" :model="dataForm" ref="dataForm" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dataForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="dataForm.tel" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="家庭住址" prop="addr">
        <el-input v-model="dataForm.addr" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="出发地址" prop="start_addr">
        <el-input v-model="dataForm.start_addr" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="出发时间" prop="arrive_time">
        <el-input v-model="dataForm.arrive_time" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="抵达时间" prop="leave_time">
        <el-input v-model="dataForm.leave_time" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="交通方式" prop="traffic_type">
        <el-input v-model="dataForm.traffic_type" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="健康码" prop="health_image">
        <img
          v-if="this.dataForm.health_image"
          :src="getItemPhoto(dataForm.health_image)"
          class="avatar"
          v-image-preview
        />
        <img v-if="!this.dataForm.health_image" src="@/assets/imgs/houtai/wutu.png" class="avatar" />
        <!-- <i v-else class="el-icon-plus"></i> -->
      </el-form-item>
      <el-form-item label="核酸报告" prop="nucleic_report_image">
        <img
          v-if="this.dataForm.nucleic_report_image"
          :src="getItemPhoto(dataForm.nucleic_report_image)"
          class="avatar"
          v-image-preview
        />
        <img
          v-if="!this.dataForm.nucleic_report_image"
          src="@/assets/imgs/houtai/wutu.png"
          class="avatar"
        />
        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import fileUtils from "@/utils/fileUtils.js";
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    departs: {
      type: Array,
    },
  },
  data() {
    return {
      rules: {
        // GID: [{ required: true, message: "必填项", trigger: "blur" }],
        // name: [{ required: true, message: "必填项", trigger: "blur" }],
        // phone: [{ required: true, message: "必填项", trigger: "blur" }],
        // idCard: [{ required: true, message: "必填项", trigger: "blur" }],
        // content: [{ required: true, message: "必填项", trigger: "blur" }],
        // photo: [{ required: true, message: "必填项", trigger: "blur" }],
      },
      dataForm: {
        name: "",
        arrive_time: "",
        addr: "",
        health_image: "",
        leave_time: "",
        nucleic_report_image: "",
        start_addr: '',
        tel: '',
        traffic_type: ''
      },

    };
  },
  methods: {

    // 关闭
    closedialog() {
      this.$emit("handleSave");
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    handleAvatarSuccess(res, file) {
      this.addImgUrl = URL.createObjectURL(file.raw);
    },


  },
  mounted() {
    this.dataForm = this.data
  }
};
</script>
<style lang="scss" scoped>
.cen {
  text-align: center;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mr20 {
  margin-right: 20px;
}
.addform {
  margin: 0 auto;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    width: 48%;
  }
  .el-form-item__content {
    .el-cascader {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
}
</style>
